<template>
    <section class="order">
        <HeaderTop title='订单列表'>
        </HeaderTop>
        <section class="order_no_login">
          <img src="./images/person.png">
          <h3>登录后查看外卖订单</h3>
<!--          <button>立即登陆</button>-->
          <router-link :to='userInfo._id?"/useinfo":"/login"' class="profile-link">
            <div class="user-info">
              <p class="user-info-top" v-if='!userInfo.phone'>{{userInfo.name || '立即登陆'}}</p>
            </div>
          </router-link>

        </section>
      </section>
</template>

<script>
    import {mapState} from 'vuex'
    import HeaderTop from '../../components/HeaderTop/HeaderTop'
    export default{
        components:{
            HeaderTop
        },
        computed:{
          ...mapState(['userInfo'])
        },
    }
</script>

<style lang='stylus' rel='stylesheet/stylus'>
         @import '../../common/stylus/mixins.styl'
        .order  //订单
          width 100%
          .order_no_login
            padding-top 140px
            width 60%
            margin 0 auto
            text-align center
            >img
              display block
              width 100%
              height 10%
            >h3
              padding 10px 0
              font-size 17px
              color #6a6a6a
            .profile-link
              .user-info
                p
                  font-weight: 700
                  font-size 18px
                  color #fff
                  &.user-info-top
                    display inline-block
                    background #02a774
                    font-size 14px
                    color #fff
                    border 0
                    outline none
                    border-radius 5px
                    padding 10px 20px

</style>
